<?PHP
session_start();

if (!(isset($_SESSION['login']) && $_SESSION['login'] != '')) {
	header ("Location: login.php");
}

?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Social User Profile Page in HTML5/CSS3[DEMO]</title>
	<link rel="stylesheet" type="text/css" href="global.css" />
</head>

<body>	
	<header>
		<div class="wrapper">
			<a href="#"><img src="img/Logo.jpg" alt="mysquare logo" title="mysquare - checkin and go home!" /></a>
			<div id="usernav">Hello, <a href="#"><?php echo $_SESSION['firstName']; ?>!</a> | <a href="#">Settings</a> | <a href="logout.php">Logout<span><img src="img/user_avatar_s.jpg" /></span></a><br />
			<div id="userstarcount">Stars to give: X | Total stars earned: X</div>
			</div>
		</div>
	</header>
	
	<nav>
		<ul id="n" class="clearfix">
			<li class="sel"><a href="index.php">Homepage</a></li>
			<li><a href="profile.php">Profile</a></li>
			<li><a href="#openModal">Give Star</a></li>
			<li><a href="#">Claim Reward</a></li>
			<li><a href="#">Search</a></li>
			<li><a href="#">Badges</a></li>
		</ul>
	</nav>

	<div id="openModal" class="modalDialog">
		<div>
			<a href="#close" title="Close" class="close">X</a>
			<h2>Give Stars</h2>
			<form action="send_comment.php" method="POST">
				Select User
				<select name="userToSend">
					<option value="1">User1</option>
					<option value="2">User2</option>
					<option value="3">User3</option>
					<option value="4">User4</option>
					<option value="5">User5</option>
				</select>
				<br>Select # of stars (you have X):
				<INPUT TYPE="NUMBER" name="starSpinner" MIN="0" MAX="1" STEP="1" VALUE="0" SIZE="6">
				<p>Comment:</p><textarea rows="4" cols="50" name="comment"></textarea>
				<input type="submit">
			</form>
		</div>
	</div>
	
	<div id="content" class="clearfix">
		<section id="left">
			<div id="userStats" class="clearfix">
				<div class="pic">
					<a href="#"><img src="img/user_avatar.jpg" width="150" height="150" /></a>
				</div>
				
				<div class="data">
					<h1>Johnny Appleseed</h1>
					<h3>San Francisco, CA</h3>
					<h4><a href="http://spyrestudios.com/">http://spyrestudios.com/</a></h4>
					<div class="socialMediaLinks">
						<a href="http://twitter.com/jakerocheleau" rel="me" target="_blank"><img src="img/twitter.png" alt="@jakerocheleau" /></a>
						<a href="http://gowalla.com/users/JakeRocheleau" rel="me" target="_blank"><img src="img/gowalla.png" /></a>
					</div>
					<div class="sep"></div>
					<ul class="numbers clearfix">
						<li>Reputation<strong>185</strong></li>
						<li>Checkins<strong>344</strong></li>
						<li class="nobrdr">Days Out<strong>127</strong></li>
					</ul>
				</div>
			</div>
			
			<h1>About Me:</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</section>
		
		<section id="right">
			<div class="gcontent">
				<div class="head"><h1>Top Players:
					<select>
						<option value="1">Number of Stars</option>
						<option value="2">Random Option 0</option>
						<option value="3">Random Option 1</option>
						<option value="4">Random Option 2</option>
						<option value="5">Random Option 3</option>
					</select></h1>
				</div>
				<div class="boxy">
					
				<div class="friendslist clearfix">
					<div id="userListContainer">
						<div id="userListContent">
							<a href="#" class="topPic"><img src="img/user_avatar.jpg" width="50" height="50" /></a>
							<div id="smalldata">
								<h3>Monkey Guy</h3>
								<ul class="numbers clearfix">
									<li>Stars <strong> 25 </strong></li>
								</ul>
							</div>
						</div>
						<div id="userListContent">
							<a href="#" class="topPic"><img src="img/user_avatar.jpg" width="50" height="50" /></a>
							<div id="smalldata">
								<h3>Other Monkey 3</h3>
								<ul class="numbers clearfix">
									<li>Stars <strong> 300 </strong></li>
								</ul>
							</div>
						</div>
						<div id="userListContent">
							<a href="#" class="topPic"><img src="img/user_avatar.jpg" width="50" height="50" /></a>
							<div id="smalldata">
								<h3>Monkey with long nam...</h3>
								<ul class="numbers clearfix">
									<li>Stars <strong> 552 </strong></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
					
					<span><a href="#">See all…</a></span>
				</div>
			</div>
			
			<div class="gcontent">
				<div class="head"><h1>Friends List</h1></div>
				<div class="boxy">
					<p>Your friends - 106 total</p>
					
					<div class="friendslist clearfix">
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Jerry K." /></a><span class="friendly"><a href="#">Jerry K.</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Katie F." /></a><span class="friendly"><a href="#">Katie F.</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Ash K." /></a><span class="friendly"><a href="#">Ash K.</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Sponge B." /></a><span class="friendly"><a href="#">Sponge B.</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Frank" /></a><span class="friendly"><a href="#">Frank</a></span>
						</div>
						
						<div class="friend">
							<a href="#"><img src="img/friend_avatar_default.jpg" width="30" height="30" alt="Alexa S." /></a><span class="friendly"><a href="#">Alexa S.</a></span>
						</div>
					</div>
					
					<span><a href="#">See all...</a></span>
				</div>
			</div>
		</section>
	</div>
</body>
</html>